<template>
    <div>
        <div :style="{width: width + 'px'}" style="margin-bottom: 30px;"><custom-title :title="title" /></div>
        <div :style="{width: width + 'px',height: height+'px'}">
            <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
        </div>
    </div>
</template>
  
<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';

export default {
    name: 'acreage',
    components: {
        ResponsiveBarChart,
    },
    props: {
        width: {
            type: Number,
            default: 870
        },
        height: {
            type: Number,
            default: 300
        },
        title: {
            type: String,
            default: '预警分析'
        },
        //数据对象
        alarmData: {
            type: Array,
            default: () => [
                { month: 'Jan', fire: 10, security: 40, electrical: 8, lightning: 3 },
                { month: 'Feb', fire: 12, security: 30, electrical: 7, lightning: 4 },
                { month: 'Mar', fire: 15, security: 7, electrical: 9, lightning: 5 },
                { month: 'Apr', fire: 18, security: 8, electrical: 10, lightning: 6 },
                { month: 'May', fire: 20, security: 20, electrical: 12, lightning: 7 },
                { month: 'Jun', fire: 5, security: 5, electrical: 14, lightning: 8 },
                { month: 'Jul', fire: 30, security: 15, electrical: 16, lightning: 9 },
                { month: 'Aug', fire: 10, security: 18, electrical: 18, lightning: 10 },
                { month: 'Sep', fire: 40, security: 20, electrical: 20, lightning: 11 },
                { month: 'Oct', fire: 5, security: 45, electrical: 22, lightning: 12 },
                { month: 'Nov', fire: 20, security: 25, electrical: 24, lightning: 13 },
                { month: 'Dec', fire: 15, security: 28, electrical: 26, lightning: 14 },
            ],
        },
        //图例
        legendData: {
            type: Array,
            default: () => ['消防警报', '安防警报', '电气警报', '防雷警报'],
        },
        //颜色
        colors: {
            type: Array,
            default: () => ['rgba(21, 154, 255, .2)', 'rgba(255, 119, 52, .2)', 'rgba(217, 231, 255, .2)', 'rgba(255, 201, 122, .2)'],
        },
        //筛选每条series数据的依据
        filterType: {
            type: String,
            default: 'month'
        },
    },
    data() {
        return {
            chartOptions: {},
        }
    },
    methods: {
        filterDataHandle() {
            if (this.alarmData && this.alarmData.length > 0) {
                const alarmTypes = Object.keys(this.alarmData[0]).filter(key => key !== this.filterType);
                let seriesConfig = [];
                alarmTypes.forEach((type, index) => {
                    seriesConfig.push({
                        name: this.legendData[index],
                        type: 'line',
                        symbol: 'none',
                        areaStyle: { color: this.colors[index] },
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.alarmData.map(item => item[type])
                    });
                });

                this.getOption(seriesConfig);
            } else {
                console.warn('alarmData is empty or not properly initialized.');
            }
        },
        onBarClicked(params) {
            console.log(params);
            // 在这里处理点击事件，例如弹出模态框显示更多数据
        },
        getOption(seriesConfig) {
            this.chartOptions = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    left: '1px',
                    icon: 'rect',
                    itemWidth: 10, 
                    itemHeight: 2, 
                    data: this.legendData
                },
                grid: {
                    left: '0%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.alarmData.map(item => item.month),
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(255, 255, 255, 0.15)'
                        }
                    }
                },
                series: seriesConfig
            }
        },
    },
    created() {
        this.filterDataHandle()
        // this.getOption()
    },
};
</script>